<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="600px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form ref="flowEdit" label-width="120px" :model="flow" :rules="rules">
      <el-form-item label="流程名" prop="FlowName">
        <el-input
          v-model="flow.FlowName"
          maxlength="50"
          placeholder="流程名"
        />
      </el-form-item>
      <el-form-item label="流程分类" prop="FlowType">
        <treeDicItem
          v-model="flow.FlowType"
          :dic-id="DictItemDic.flowType"
          placeholder="流程分类"
        />
      </el-form-item>
      <el-form-item label="默认表单" prop="DefFormId">
        <formInput v-model="flow.DefFormId" placeholder="选择默认表单" prt-form-classify="02" :form-type="[0,1]" />
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input
          v-model="flow.Remark"
          type="textarea"
          maxlength="100"
          placeholder="备注"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import * as flowApi from '@/flow/api/flow'
import formInput from '@/customForm/components/form/formInput.vue'
export default {
  components: {
    formInput
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    flowType: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '新增流程',
      source: {},
      flow: {
        FlowName: null,
        FlowType: null,
        Remark: null
      },
      rules: {
        FlowName: [
          {
            required: true,
            message: '流程名不能为空！',
            trigger: 'blur'
          }
        ],
        FlowType: [
          {
            required: true,
            message: '流程分类不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      const that = this
      this.$refs['flowEdit'].validate((valid) => {
        if (valid) {
          if (that.id) {
            that.set()
          } else {
            that.add()
          }
        } else {
          return false
        }
      })
    },
    async set() {
      await flowApi.Set(this.id, this.flow)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async add() {
      await flowApi.Add(this.flow)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async reset() {
      if (this.id == null) {
        this.title = '新增流程'
        this.source = null
        this.flow = {
          FlowName: null,
          FlowType: this.flowType,
          Remark: null,
          DefFormId: null
        }
      } else {
        const data = await flowApi.Get(this.id)
        this.source = data
        this.flow = Object.assign({}, data)
        this.title = '编辑流程:' + data.FlowName
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.id == null) {
        this.flow = {
          FlowName: null,
          FlowType: this.flowType,
          Remark: null,
          DefFormId: null
        }
      } else {
        this.flow = Object.assign({}, this.source)
      }
    }
  }
}
</script>
